<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单布局</title>
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	</head>
	<body>
		<!-- 
			表单布局
				1. 向父<form>元素添加 role="form"
				2. 把标签和控件放在一个带有class.form-group的<div>中! 这是获取追加间距所必须的
				3. 向所有的文本元素<input> <textarea> 和 <select> 添加class= "form-control"
		 -->
		 
		 <!-- 水平表单 -->
		 <!-- 姓名 -->
		 <form action="" role="form" class="form-horizontal">
			 <h2 align="center">用户信息表</h2>
			 <div class="form-group">
				 <label for="uname" class="control-label col-md-2">姓名</label>
				 <div class="col-md-8">
					 <input type="text" name="" id="uname" class="form-control" placeholder="请输入姓名">
				 </div>
			 </div>
			 
			 <!-- 密码 -->
			 <div class="form-group">
				 <label for="upwd" class="control-label col-md-2">密码</label>
				 <div class="col-md-8">
					 <input type="password" name="" id="upwd" class="form-control" placeholder="请输入密码">
				 </div>
			 </div>
			 
			 <!-- 爱好 -->
			 <div class="form-group">
				 <label for="" class="control-label col-md-2">爱好</label>
				 <div class="col-md-8">
					 <label for="" class="checkbox-inline">
						 <input type="checkbox" name="hobby"  value="sing">唱歌
					 </label>
					 <label for="" class="checkbox-inline">
					 	<input type="checkbox" name="hobby"  value="dance">跳舞
					 </label>
					 <label for="" class="checkbox-inline">
					 	<input type="checkbox" name="hobby"  value="writer">写作
					 </label>
				 </div>
			 </div>
			 
			 <!-- 下拉框 -->
			 <div class="form-group">
			 				 <label for="" class="control-label col-md-2">城市</label>
			 				 <div class="col-md-8">
								 <select class="form-control">
									 <option value="">请选择城市</option>
									 <option value="">上海</option>
									 <option value="">北京</option>
								 </select>
			 				 </div>
			 </div>
			 
			 <!-- 文本框 -->
			 <div class="form-group">
				 <label for="remark" class="control-label col-md-2">简介</label>
				 <div class="col-md-8">
					 <textarea name="" id="remark" class="form-control"></textarea>
				 </div>
			 </div>
			 
			 <!-- 按钮 -->
			 <div class="form-group">
				 <div class="col-md-2 col-md-offset-6">
					 <button type="button" class="btn btn-primary">提交</button>
				 </div>
			 </div>
			 
		 </form>
	</body>
</html>